<template>
  <div>
    <el-form :model="couponForm" ref="couponFormRef" label-width="120px" style="margin-top: 50px;">
      <el-form-item label="优惠券类型" prop="type" required>
        <el-select v-model="couponForm.type" placeholder="请选择...">
          <el-option
              v-for="type in types"
              :key="type.id"
              :label="type.type"
              :value="type.type">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券状态" prop="status" required>
        <el-select v-model="couponForm.status" placeholder="请选择...">
          <el-option
              v-for="type in statuss"
              :key="type.id"
              :label="type.status"
              :value="type.status">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券发放量" prop="quantity" required>
        <el-select v-model="couponForm.quantity" placeholder="请选择...">
          <el-option
              v-for="type in quantitys"
              :key="type.id"
              :label="type.quantity"
              :value="type.quantity">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCoupons1">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="addCoupon">新增优惠券</el-button>

    <div>
      <el-table :data="coupons" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="优惠券名称" width="180"></el-table-column>
        <el-table-column prop="value" label="面值" width="100"></el-table-column>
        <el-table-column prop="type" label="优惠券类型" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="100"></el-table-column>
        <el-table-column prop="quantity" label="发放量" width="100"></el-table-column>
        <el-table-column prop="couponUsage" label="使用量" width="100"></el-table-column>
        <el-table-column prop="startDate" label="有效期开始" width="180"></el-table-column>
        <el-table-column prop="endDate" label="有效期结束" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="mini" @click="viewCoupon(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="editCoupon(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteCoupon(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-button type="danger" @click="batchDelete">批量删除</el-button>

<!--    <div class="demo-pagination-block">-->
<div>
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[2, 3, 4, 5]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import router from "@/router/index.js";
import axios from "axios";

let pageNum = ref(1);
let pageSize = ref(3);
let total = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);

const handleSizeChange = (val) => {
  pageSize.value = val;
  searchcoupons();
}
const handleCurrentChange = (val) => {
  // 将这个val数字赋值给 pageNum
  pageNum.value = val;
  searchcoupons();
}
const coupons = ref([])
const multipleTable = ref(null)
const selectedCouponIds = ref([])
const couponForm=ref({})
const types = ref([])
const statuss = ref([])
const quantitys = ref([])
// 显示所有的优惠券信息=============================================================
const searchcoupons = () => {
  axios.get(`/coupons/getAll/${pageNum.value}/${pageSize.value}`).then(res => {
    coupons.value = res.data.obj.data;
    total.value = res.data.obj.total;
  })
}
// 显示所有的优惠券信息=============================================================

// 编辑所有的优惠券信息============================================================================
const editCoupon = (row) => {
 router.push({ name: 'AddCouponPage',params: { id: row.id }  })
}
// 编辑所有的优惠券信息============================================================================

// 新增所有的优惠券信息=====================================================================
const addCoupon = () => {
  router.push({ name: 'AddCouponPage2' },);
}
// 新增所有的优惠券信息=====================================================================

// 查看详情=================================================================================
const viewCoupon = (row) => {
  router.push({ name: 'CouponDetailsPage',params: { id: row.id } });
}
// 查看详情=================================================================================

// 单个删除优惠券信息=============================================================================
const deleteCoupon = (coupon) => {
  axios.delete(`/coupons/delete/${coupon.id}`).then(res => {
    ElMessage.success("删除成功")
    searchcoupons();
  })
}
// 单个删除优惠券信息=============================================================================

// 批量删除优惠券信息============================================================================
const batchDelete = () => {
  axios.post("/coupons/deleteBatch", selectedCouponIds.value).then(res => {
    ElMessage.success("批量删除成功！！！！")
    searchcoupons();
  })
}
// 批量删除优惠券信息============================================================================

// 条件查询================================================================================
const searchCoupons1 = () => {

  axios.post(`/coupons/selectCoupon/${pageNum.value}/${pageSize.value}`,couponForm.value)
      .then(res => {
        coupons.value = res.data.obj.data;
        total.value = res.data.obj.total;
        ElMessage.success("查询成功");
      })
      .catch(error => {
        console.error('查询失败:', error);
        ElMessage.error('查询失败');
      });
};
// 条件查询================================================================================

//获取优惠券类型============================================================================
const getTypes = () => {
  axios.get("/coupons/gettype")
      .then((res) => {
        types.value = res.data
      })
      .catch((error) => {
        console.error('获取优惠券类型失败:', error);
        ElMessage.error('获取优惠券类型失败');
      });
};
//获取优惠券类型============================================================================

//获取优惠券状态==============================================================================
const getStatistics = () => {
  axios.get("/coupons/getStatistics").then(res => {
    statuss.value = res.data;
  })
}
//获取优惠券状态============================================================================

//获取优惠券发放量============================================================================
const getQuantity = () => {
  axios.get("/coupons/getQuantity").then(res => {
    quantitys.value = res.data;
  })
}
//获取优惠券发放量============================================================================

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedCouponIds.value = selection.map(item => item.id);
}



onMounted(() => {
  searchcoupons();
  getTypes();
  getStatistics();
  getQuantity();
})
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}
/* 分页样式 - 固定在底部 */
.demo-pagination-block {
  width: 100%;
  padding: 20px;
  background-color: black;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
}
</style>